<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Backbone.js Library</title>
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/jquery-ui-1.9.2.css">
	<link rel="stylesheet" href="css/demos.css">
	<style>
		#toolbar {
			padding: 4px;
			display: inline-block;
		}
	</style>
</head>
<body>

	<!-- Tests for toolbar <<< 
	<div id="toolbar" class="ui-widget-header ui-corner-all">
		<button id="beginning">go to beginning</button>
		<button id="rewind">rewind</button>
		<button id="play">play</button>
		<button id="stop">stop</button>
		<button id="forward">fast forward</button>
		<button id="end">go to end</button>
		<input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
		<span id="repeat">
			<input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
			<input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
			<input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
		</span>
	</div>
	>>> -->

	<!-- global application view AppView * BEGIN <<< -->
	<div id="appview"> 

		<div id="toolbar" class="ui-widget-header ui-corner-all">
			<a href="#about">About</a></span>
			<span id="viewMode">
				<input type="radio" id="addBookForm" name="viewMode"><label for="addBookForm">Add book...</label>
				<input type="radio" id="showLibrary" name="viewMode" checked="checked"><label for="showLibrary">Show Library</label>
				<!--
			   <a	href="#addBookForm">Add Book</a></span>
				<a href="#showLibrary">Library</a></span>
				-->
			</span>
		</div>

		<!-- widget LibraryView * BEGIN <<< -->
		<div id="books" style="display: block">  
			<form>
				<div>
					<button id="yetAnotherAdd">Context Text</button>
				</div>
			</form>
			<!-- HERE ARE PUT THE BOOKS -->
		</div> 
		<!-- widget LibraryView * END >>> -->

		<!-- widget AddNewBook * BEGIN <<< -->
		<div id="addBookContainer" style="display: none">
			<form id="addBook" action="#">
			<div class="formFrame">
				<div class="formLabels">
					<label for="coverImage">CoverImage: </label>
					<label for="title">Title: </label>
					<label for="author">Author: </label>
					<label for="releaseDate">Release date: </label>
					<label for="keywords">Keywords: </label>
				</div>
				<div class="formFields">
 					<input id="coverImage" type="file" />
 					<input id="title" type="text" />
 					<input id="author" type="text" />
					<input id="releaseDate" type="text" />
 					<input id="keywords" type="text" />
				</div>
				<button id="add">Add</button>
			</div>
			</form>
		</div>
		<!-- widget LibraryView * END >>> -->

		<!-- widget BookShelf * BEGIN <<< -->
		<!-- This is for test purposes only, used for context event -->
		<div id="bookShelf"> 
			<form id="newForm" action="#">
				<div>
					<button id="newItem">Context Test (global)</button>
				</div>
			</form>
		</div> 
		<!-- widget BookShelf * END >>> -->

	</div> 
	<!-- global application view * END >>> -->

	<script data-main="js/app" src="js/lib/require.js"></script>
</body>
</html>
